<template>
  <div style="display:flex;">
    <div>
      <el-tooltip content="应用市场" placement="bottom" :enterable="false">
        <el-button
          size="small"
          icon="iconfont icon-app"
          type="warning"
          @click="shop"
          circle
        ></el-button>
      </el-tooltip>
      <el-tooltip content="待办事项" placement="bottom" :enterable="false">
        <el-button
          size="small"
          icon="iconfont icon-task"
          type="primary"
          @click="todo"
          circle
        ></el-button>
      </el-tooltip>
      <el-badge :value="12" style="margin-left:10px;" class="item">
        <el-tooltip content="消息中心" placement="bottom" :enterable="false">
          <el-button
            size="small"
            icon="iconfont icon-LC_icon_chat_fill"
            type="success"
            @click="msg"
            circle
          ></el-button>
        </el-tooltip>
      </el-badge>
    </div>
    <div class="user" @click="userSetting">
      <el-tooltip content="用户信息" placement="bottom" :enterable="false">
        <el-avatar
          v-if="icon"
          shape="square"
          :size="40"
          :src="icon"
        ></el-avatar>
        <el-avatar
          v-else
          shape="square"
          :size="40"
          :style="{ backgroundColor: color }"
          >{{ name }}</el-avatar
        >
      </el-tooltip>
    </div>
    <el-drawer
      append-to-body
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="400px"
      style="z-index:2009"
    >
      <user-info :user="user" v-show="drawerTitle==DRAWER.USER" />
      <msg-info v-show="drawerTitle==DRAWER.MSG" />
      <todo v-show="drawerTitle==DRAWER.TODO" />
      <shop-info v-show="drawerTitle==DRAWER.SHOP"/>
    </el-drawer>
  </div>
</template>

<script>
import Mock from "mockjs";
import Todo from '@view/admin/Todo'
import UserInfo from "@view/admin/UserInfo"
import MsgInfo from '@view/admin/MsgInfo'
import ShopInfo from '@view/admin/ShopInfo'
import {DRAWER} from '../../../constant/titles.js'
export default {
  components: { UserInfo, MsgInfo, Todo, ShopInfo },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      color: Mock.mock("@color"),
      user: {
      },
      drawerTitle: "",
      type:'user',
      icon:'',
      DRAWER
    };
  },
  computed: {
    name() {
      if (this.user.hasOwnProperty("name")) {
        return this.user.name.substring(0, 1);
      } else {
        return "无";
      }
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
    userSetting() {
      console.log("open drawer");
      this.drawer = !this.drawer;
      this.drawerTitle = DRAWER.USER;
    },
    msg() {
      this.drawer = !this.drawer;
      this.drawerTitle = DRAWER.MSG;
    },
    todo() {
      this.drawer = !this.drawer;
      this.drawerTitle = DRAWER.TODO;
    },
    shop() {
      this.drawer = !this.drawer;
      this.drawerTitle = DRAWER.SHOP;
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    })
  },
};
</script>

<style lang="less" scoped>
.user {
  cursor: pointer;
  width: 80px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  margin-left: 10px;
}
.el-badge {
  /deep/.el-badge__content {
    margin-top: 15px;
  }
}
.func-drawer {
  width: 400px;
}
</style>
<style lang="less"></style>
